<template>
  <div class="page-body relative">
    <div class="page " id="description">
      <div class="subpage">
        <!-- <顶部左边部分开始 -->
        <div class="top-left">
          <!-- M单或者H单发货人  -->
          <div class="shipper">
            <p>Shipper</p>
            <p style="margin-left:15px;">
              <!-- 0:M单;1:H单 -->
              <template v-if="info.simpleWaybillQuery">
                <template
                  v-if="
                    info.billType == 0 &&
                      info.simpleWaybillQuery.masterNumberSender
                  "
                >
                  <span
                    v-html="
                      info.simpleWaybillQuery.masterNumberSender.replace(
                        /\n/g,
                        '<br>'
                      )
                    "
                  >
                  </span>
                </template>
                <template
                  v-else-if="
                    info.billType == 1 &&
                      info.simpleWaybillQuery.houseNumberSender
                  "
                >
                  <span
                    v-html="
                      info.simpleWaybillQuery.houseNumberSender.replace(
                        /\n/g,
                        '<br>'
                      )
                    "
                  >
                  </span>
                </template>
              </template>
            </p>
          </div>
          <!-- M单或者H单收货人 -->
          <div class="consignee">
            <p>Consignee(If* To order*,so indicate)</p>
            <p style="margin-left:15px;">
              <!-- 0:M单;1:H单 -->
              <template v-if="info.simpleWaybillQuery">
                <template
                  v-if="
                    info.billType == 0 &&
                      info.simpleWaybillQuery.masterNumberReceiver
                  "
                >
                  <span
                    v-html="
                      info.simpleWaybillQuery.masterNumberReceiver.replace(
                        /\n/g,
                        '<br>'
                      )
                    "
                  >
                  </span>
                </template>
                <template
                  v-else-if="
                    info.billType == 1 &&
                      info.simpleWaybillQuery.houseNumberReceiver
                  "
                >
                  <span
                    v-html="
                      info.simpleWaybillQuery.houseNumberReceiver.replace(
                        /\n/g,
                        '<br>'
                      )
                    "
                  >
                  </span>
                </template>
              </template>
            </p>
          </div>
          <!-- M单或者H单通知人 -->
          <div class="notify-party">
            <p>Notify Party(No claim shall attach for failure to notify)</p>
            <p style="margin-left:15px;">
              <!-- 0:M单;1:H单 -->
              <template v-if="info.simpleWaybillQuery">
                <template v-if="info.billType == 0">
                  SAME AS CONSIGNEE
                </template>
                <template v-else-if="info.billType == 1">
                  <template v-if="info.simpleWaybillQuery.houseNumberNotifier">
                    <span
                      v-html="
                        info.simpleWaybillQuery.houseNumberNotifier.replace(
                          /\n/g,
                          '<br>'
                        )
                      "
                    >
                    </span>
                  </template>
                  <template v-else>
                    SAME AS CONSIGNEE
                  </template>
                </template>
              </template>
            </p>
          </div>
          <div>
            <div class="pre-carriage">
              <!-- 船公司 -->
              <p>Pre-carriage by</p>
              <p>
                {{
                  info.configShipMap[
                    `${info.simpleWaybillQuery.shipOrAirlineCompany}`
                  ]
                }}
              </p>
            </div>
            <div class="place-of-receipt">
              <!--提货地址-->
              <p>Place of Receipt</p>
              <p></p>
            </div>
          </div>
          <div>
            <div class="ocean-vessel">
              <!--船航次/船只-->
              <p>Ocean Vessel<span style="margin-left:70px;">Voy.NO</span></p>
              <p>
                {{ info.simpleWaybillQuery.bigShip }}&nbsp;&nbsp;&nbsp;&nbsp;{{
                  info.simpleWaybillQuery.shipFlights
                }}
              </p>
            </div>
            <div class="port-of-loading">
              <!--起运港-->
              <p>Port of Loading</p>
              <p>
                {{ info.configPortMap[info.simpleWaybillQuery.shipmentPort] }}
              </p>
            </div>
          </div>
        </div>
        <!-- 顶部左边部分结束 -->
        <!-- 顶部右边LOGO部分 -->
        <div class="top-right">
          <!-- M单或者H单号信息 -->
          <div class="master-house-number">
            <span>
              B/L NO:
              <template v-if="info.simpleWaybillQuery">
                <template v-if="info.waybillMergeType == 2">
                  {{ info.simpleWaybillQuery.masterNumber }}
                </template>
                <template v-else>
                  <template v-if="info.simpleWaybillQuery">
                    <template v-if="info.billType == 0">
                      {{ info.simpleWaybillQuery.masterNumber }}
                    </template>
                    <template v-else-if="info.billType == 1">
                      {{ info.simpleWaybillQuery.houseNumber }}
                    </template>
                  </template>
                </template>
              </template>
            </span>
          </div>
          <!-- 无船承运人信息  -->
          <span class="nvocc">NVOCC N/M:MOC-NV 06723</span>
          <div class="fba-logo">
            <img :src="img1" style="margin-left:5px;width: 350px;" />
          </div>
          <h6>BILL OF LADING</h6>
          <h6>COPY NON-NEGOTIABLE</h6>
          <span class="delivery-info"
            >FOR DELIVERY OF GOODS PLEASE APPLY TO</span
          >
          <p style="margin-left:10px;">
            <!--代理信息-->
            <template v-if="info.simpleWaybillQuery">
              <template
                v-if="
                  info.billType == 0 &&
                    info.simpleWaybillQuery.masterNumberAgent
                "
              >
                <span
                  v-html="
                    info.simpleWaybillQuery.masterNumberAgent.replace(
                      /\n/g,
                      '<br>'
                    )
                  "
                >
                </span>
              </template>
              <template
                v-else-if="
                  info.billType == 1 && info.simpleWaybillQuery.houseNumberAgent
                "
              >
                <span
                  v-html="
                    info.simpleWaybillQuery.houseNumberAgent.replace(
                      /\n/g,
                      '<br>'
                    )
                  "
                >
                </span>
              </template>
            </template>
          </p>
        </div>
        <!--清除浮动-->
        <div class="clearfix"></div>
        <!--Discharge Delivery Destination-->
        <div class="delivery-discharge-info">
          <div class="port-of-discharge">
            <!-- 卸货港 -->
            <p>Port of Discharge</p>
            <p>
              {{ info.configPortMap[info.simpleWaybillQuery.transferPort] }}
            </p>
          </div>
          <div class="place-of-delivery">
            <!--目的港-->
            <p>Place of Delivery</p>
            <p>
              {{ info.configPortMap[info.simpleWaybillQuery.destinationPort] }}
            </p>
          </div>
          <div class="final-destination">
            <p>Final destination(for the Merchant's reference only)</p>
          </div>
        </div>
        <div class="clearfix"></div>
        <!--订单相关信息部分-->
        <div class="waybill-main-info">
          <div class="container-seal ">
            <p>Container No.&amp;Seal No.</p>
            <p>Mark &amp; Numbers</p>
            <!--唛头-->
            <div
              v-if="
                info.simpleWaybillQuery && info.simpleWaybillQuery.shippingMark
              "
            >
              <!-- {{info.simpleWaybillQuery.shippingMark.replace('\n','<br />')}} -->
              <!-- <div v-html="info.simpleWaybillQuery.shippingMark"></div> -->
              <div
                v-html="
                  info.simpleWaybillQuery.shippingMark.replace(/\n/g, '<br>')
                "
              ></div>
            </div>
            <div style="position:absolute;top: 650px;">
              <h5
                v-for="(item, index) in info.containerInformationList"
                :key="index"
              >
                {{ item }}
              </h5>
            </div>
          </div>
          <div class="containers-or-packages">
            <p>No.of containers or packages</p>
            <!--总箱数,包装类型-->
            <h5 v-for="(item, index) in info.totalContails" :key="index">
              {{ item }}
            </h5>
            <!-- {{ info.defaultBoxType }}
            {{ info.totalPackages }}{{ info.packageType }} -->
          </div>
          <div class="description-of-packages-and-goods">
            <p>Description of Packages and Goods</p>
            <template
              v-if="
                info.simpleWaybillQuery && info.simpleWaybillQuery.shippingWay
              "
            >
              <template v-if="info.simpleWaybillQuery.shippingWay == 'FCL'">
                <p>CY-CY</p>
                <p>SHIPPER'S LOAD,COUNT & SEAL</p>
              </template>
              <template
                v-else-if="info.simpleWaybillQuery.shippingWay == 'LCL'"
              >
                <p>CFS-CFS</p>
                <p>SHIPPER'S LOAD,COUNT & SEAL</p>
              </template>
            </template>

            <template></template>

            <p v-if="info.simpleWaybillQuery.nameDescription">
              <span
                v-html="
                  info.simpleWaybillQuery.nameDescription.replace(/\n/g, '<br>')
                "
              >
              </span>
            </p>
            <p v-else></p>
            <div v-if="info.operationType == 'COPY'">
              <div class="copy-watermark">
                <img :src="img2" />
              </div>
            </div>
          </div>
          <div class="gross-weight">
            <p>Gross weight</p>
            <p>(KGS)</p>
            <p>{{ info.totalWeight }}KGS</p>
          </div>
          <div class="measurement">
            <p>Measurement</p>
            <p>(CBM)</p>
            <p>{{ info.totalVolume }}CBM</p>
            <template v-if="info.operationType === 'SURRENDERED'">
              <div class="surrendered-watermark">
                <h5>SHIPPED ON BOARD</h5>
                <h5>{{ info.estimatedDepartureTime }}</h5>
                <img :src="img3" style="margin-top:15px;margin-left:-30px;" />
              </div>
            </template>
            <template v-else-if="info.operationType === 'COPY'">
              <div class="surrendered-watermark">
                <h5>SHIPPED ON BOARD</h5>
                <h5>{{ info.estimatedDepartureTime }}</h5>
              </div>
            </template>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="total-number-of-containers-of-packages">
          <p>Total Number of Containers of Packages(in Words)</p>
          <template
            v-if="
              info.simpleWaybillQuery && info.simpleWaybillQuery.shippingWay
            "
          >
            <template v-if="info.simpleWaybillQuery.shippingWay == 'LCL'">
              <h6>
                SAY {{ info.simpleWaybillQuery.customerTotalPackages }}
                {{ info.defaultBoxType }}ONLY
              </h6>
            </template>
            <template v-else>
              <h6>{{ info.totalNumberOfContainersOfPackages }}</h6>
            </template>
          </template>
        </div>
        <div class="freight-revenue-rate">
          <div class="freight-and-charges">
            <p>Freight and Charges</p>
          </div>
          <div class="revenue-tone">
            <p>Revenue Tone</p>
          </div>
          <div class="rate-per">
            <p>Rate&nbsp;&nbsp;&nbsp;&nbsp;Per</p>
          </div>
          <div class="prepaid">
            <p>prepaid</p>
          </div>
          <div class="collect">
            <p>Collect</p>
          </div>
        </div>
        <div class="declaramon-refor">
          <div class="excess-value-declaramon-refor">
            <p style="font-size:12px;">
              Excess Value Declaramon Refor to clause6(4)(B)*(C)on reverse side
            </p>
          </div>
          <div class="freight-and-charges">
            <p style="font-size:12px;padding-left:5px;">
              Freight and charges payable at
            </p>
          </div>
          <div class="number-of-original">
            <dl>
              <dt>Number of Original B(s)/L</dt>
              <dd>THREE(3)</dd>
            </dl>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="bottom-left">
          <div class="info-1">
            <p style="font-size:10px;">
              RECEIVED in external apparent good order and condition,except
              otherwise noted.The total number of containers or other packages
              or units shown in this Bill of lading receipt,no resonable means
              of checking and is not part of the Bill of lading.One original
              Bill of Lading should be surrendered,except clause 22 paragraph
              5,in exchange for delivery of the shipment.Signed by the consigned
              or duly endorsed by the holder in due course. Whereupon the other
              original(s) issued shall be void.In accepting this Bill of
              Lading.the merchants agree to be bound by all the terms on the
              face and back hereof as if each had personally signed this Bill of
              Lading
            </p>
          </div>
          <div class="info-2">
            <p style="font-size:10px;">
              WHEN the Place of Receipt of the Goods is an inland point and is
              so named herein,any notation of “ON BOARD”:SHIPPED ON BOARD”or
              words to like effect on this Bill of Lading shall be deemed to
              mean on board the truck,trail car,air craft or other inland
              conveyance(as the case may be),perfrming carriage from the Place
              of Receipt of the Goods to the port of Loading.
            </p>
          </div>
        </div>
        <div class="bottom-right">
          <div class="place-and-date-of-issue">
            <dl>
              <dt>Place and date of issue</dt>
              <dd style="margin-top:20px;"></dd>
            </dl>
          </div>
          <div class="signed-on-behalf-for-the-carrier">
            Signed on behalf for the Carrier
            <div class="fba-logo">
              <img
                :src="img4"
                style="margin-left:110px;margin-top:-33px;width: 300px;height:150px;"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import img1 from "@/assets/images/fba-logo.png";
import img2 from "@/assets/images/COPY.png";
import img3 from "@/assets/images/SURRENDERED.png";
import img4 from "@/assets/images/fba-seal.png";
import { ajax } from "@/store/yg/common/utils";

export default {
  data() {
    return {
      img1,
      img2,
      img3,
      img4,
      attrs: {
        class: "com.tofba.app.client.seaair.SeaAirExpressListClient",
        uri: "/open/message",
        type: "blank"
      },
      info: {
        simpleWaybillQuery: {},
        configShipMap: {},
        configPortMap: {}
      }
    };
  },
  mounted() {
    if (this.$route.query.waybillId) {
      this.getInfo();
    }
  },
  methods: {
    async getInfo() {
      const { data, code, message } = await ajax(
        "viewWaybillMasterAndHouseNumber",
        {
          id: this.$route.query.waybillId,
          billType: this.$route.query.billType,
          operationType: this.$route.query.operationType
        },

        this.attrs
      );
      if (code === 200) {
        this.info = data;
      } else {
        this.$message.error(message);
      }
    },
    preview() {
      window.print();
    },
    printpage() {
      let newstr = document.getElementById("description").innerHTML;
      let oldstr = document.body.innerHTML;
      document.body.innerHTML = newstr;
      // printHtml(newstr)
      window.print();
      document.body.innerHTML = oldstr;
      return false;
    }
  }
};
</script>

<style lang="scss" scoped media="print">
* {
  font-family: Calibri;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  font-size: 12px;
}

p,
dl,
dt,
dd,
h5,
h6 {
  margin: 0px;
  padding: 0px;
  font-size: 12px;
}

.page-body {
  height: 100vh;
  overflow-y: auto;
}

.page {
  width: 21cm;
  min-height: 29cm;
  padding: 1cm 0.5cm;
  margin: 1cm auto;
  border: 1px #d3d3d3 solid;
  border-radius: 0px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  height: 270mm;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

.top-left {
  width: 50%;
  float: left;
}

.top-right {
  width: 50%;
  float: left;
  height: 376px;
  border-bottom: 1px #000000 solid;
}

.shipper,
.consignee,
.notify-party {
  height: 100px;
  border-right: 1px #000000 solid;
}

.shipper {
  border-bottom: 1px #000000 solid;
}

.consignee {
  border-bottom: 1px #000000 solid;
}

.notify-party {
  border-bottom: 1px #000000 solid;
}

.pre-carriage,
.place-of-receipt,
.ocean-vessel,
.port-of-loading {
  padding-left: 2px;
  float: left;
  width: 50%;
  height: 38px;
  border-right: 1px #000000 solid;
  border-bottom: 1px #000000 solid;
}

.clearfix {
  clear: both;
}

.master-house-number {
  width: 100%;
}

.master-house-number span {
  font-size: 16px;
  font-weight: bold;
  height: 20px;
  border: #000000 1px solid;
  margin-left: 15px;
}

.nvocc {
  font-size: 12px;
  margin-left: 20px;
  margin-top: 10px;
  display: block;
}

.fba-logo {
  width: 100%;
}

h6 {
  text-align: center;
}

.delivery-info {
  margin-left: 10px;
  margin-top: 15px;
  font-size: 14px;
  display: block;
}

.delivery-discharge-info {
  width: 100%;
  height: 40px;
  border-bottom: #000000 1px solid;
}

.port-of-discharge {
  padding-left: 2px;
  float: left;
  height: 100%;
  width: 25%;
  border-right: #000000 1px solid;
}

.place-of-delivery {
  padding-left: 2px;
  float: left;
  width: 25%;
  height: 100%;
  border-right: #000000 1px solid;
}

.final-destination {
  padding-left: 2px;
  float: left;
  height: 100%;
  width: 50%;
}

.waybill-main-info {
  width: 100%;
  height: 250px;
  border-bottom: #000000 1px solid;
  display: flex;
}

.container-seal {
  // width: 20%;
  // padding-left: 2px;
  // float: left;
  height: 100%;
  min-width: 20%;
  border-right: #000000 1px dotted;
}

.containers-or-packages {
  // padding-left: 2px;
  // float: left;
  height: 100%;
  min-width: 20%;
  border-right: #000000 1px dotted;
}

.description-of-packages-and-goods {
  // padding-left: 2px;
  // float: left;
  min-width: 30%;
  height: 100%;
  border-right: #000000 1px dotted;
}

.gross-weight {
  // padding-left: 2px;
  // float: left;
  min-width: 15%;
  height: 100%;
  border-right: #000000 1px dotted;
}

.measurement {
  // float: left;
  min-width: 10%;
  height: 100%;
}

.total-number-of-containers-of-packages {
  width: 100%;
  height: 36px;
  border-bottom: #000000 1px solid;
}

.freight-revenue-rate {
  width: 100%;
  height: 45px;
  border-bottom: #000000 1px solid;
}

.freight-revenue-rate p {
  text-align: center;
}

.declaramon-refor {
  width: 100%;
  height: 36px;
  border-bottom: #000000 1px solid;
}

.freight-and-charges,
.revenue-tone,
.rate-per,
.prepaid {
  width: 20%;
  height: 100%;
  float: left;
  border-right: #000000 1px solid;
}

.collect {
  height: 18%;
  float: left;
}

.excess-value-declaramon-refor {
  width: 50%;
  border-right: #000000 1px solid;
  float: left;
  height: 100%;
}

.freight-and-charges {
  width: 25%;
  border-right: #000000 1px solid;
  float: left;
  height: 100%;
}

.number-of-original {
  width: 25%;
  float: left;
  height: 100%;
  text-align: center;
}

.bottom-left {
  float: left;
  width: 50%;
  min-height: 240px;
  border-right: #000000 1px solid;
}

.bottom-right {
  float: left;
  width: 50%;
}

.info-1,
.info-2 {
  width: 100%;
}

.info-1 {
  min-height: 150px;
  border-bottom: #000000 1px solid;
}

.place-and-date-of-issue {
  padding-left: 2px;
  width: 100%;
  border-bottom: #000000 1px solid;
  min-height: 90px;
}

.signed-on-behalf-for-the-carrier {
  padding-left: 2px;
  width: 100%;
}
/*copy水印*/
.copy-watermark {
  position: relative;
  top: 120px;
}
/*
 * surrendered水印
 */
.surrendered-watermark {
  position: relative;
  top: 100px;
}
</style>
